<template>
  <div
    ref="floatDragRef"
    class="float-position11"
    :style="{ left: left + 'px', top: top + 'px', zIndex: zIndex, opacity: 0.6 }"
    @click="handlepaly"
  >
    <!--    @touchmove.prevent-->
    <!--    @mousemove.prevent-->
    <!--    @mousedown="mouseDown"-->
    <!--    @mouseup="mouseUp"-->
    <Icon type="ios-settings-outline" color="#ffffff" size="45" />
  </div>
</template>

<script setup>
  const props = defineProps({
    canDanBool: {
      type: Boolean,
      default: false
    },
    distanceRight: {
      type: Number,
      default: 0
    },
    distanceBottom: {
      type: Number,
      default: 100
    },
    isScrollHidden: {
      type: Boolean,
      default: false
    },
    isCanDraggable: {
      type: Boolean,
      default: true
    },
    zIndex: {
      type: Number,
      default: 9999
    },
    value: {
      type: String,
      default: '悬浮球！'
    }
  })

  const clientWidth = ref(null)
  const clientHeight = ref(null)
  const left = ref(0)
  const top = ref(0)
  const timer = ref(null)
  const currentTop = ref(0)
  // const mousedownX = ref(0)
  // const mousedownY = ref(0)
  const canClick = ref()

  const floatDragDom = ref()

  clientWidth.value = document.documentElement.clientWidth
  clientHeight.value = document.documentElement.clientHeight

  const floatDragRef = ref()
  onMounted(() => {
    props.isCanDraggable &&
      nextTick(() => {
        // 获取元素位置属性
        floatDragDom.value = floatDragRef.value.getBoundingClientRect()
        // 设置初始位置
        left.value = clientWidth.value - floatDragDom.value.width - props.distanceRight
        top.value = floatDragDom.value.height + 20
        // this.top =
        //     this.clientHeight - this.floatDragDom.height - this.distanceBottom;
        initDraggable()
      })
    props.isScrollHidden && window.addEventListener('scroll', handleScroll)
    window.addEventListener('resize', handleResize)
  })

  const emit = defineEmits(['handlepaly'])
  const handlepaly = () => {
    emit('handlepaly', left.value, top.value)
  }
  /**
   * 设置滚动监听
   * 设置滚动时隐藏悬浮按钮，停止时显示
   */
  const handleScroll = () => {
    timer.value && clearTimeout(timer.value)
    timer.value = setTimeout(() => {
      handleScrollEnd()
    }, 200)
    currentTop.value = document.documentElement.scrollTop || document.body.scrollTop
    if (left.value > clientWidth.value / 2) {
      // 判断元素位置再左侧还是右侧
      left.value = clientWidth.value + floatDragDom.value.width
    } else {
      left.value = -floatDragDom.value.width
    }
  }
  /**
   * 滚动结束
   */
  const handleScrollEnd = () => {
    let scrollTop = document.documentElement.scrollTop || document.body.scrollTop
    if (scrollTop === currentTop.value) {
      if (left.value > clientWidth.value / 2) {
        // 判断元素位置再左侧还是右侧
        left.value = clientWidth.value - floatDragDom.value.width
      } else {
        left.value = 0
      }

      clearTimeout(timer.value)
    }
  }
  /**
   * 窗口resize监听
   */
  const handleResize = () => {
    clientWidth.value = document.documentElement.clientWidth
    clientHeight.value = document.documentElement.clientHeight
    checkDraggablePosition()
  }
  /**
   * 初始化draggable
   */
  const initDraggable = () => {
    floatDragRef.value.addEventListener('touchstart', toucheStart())
    floatDragRef.value.addEventListener('touchmove', (e) => touchMove(e))
    floatDragRef.value.addEventListener('touchend', touchEnd())
  }
  // const mouseDown = (e) => {
  //   const event = e || window.event
  //   mousedownX.value = event.screenX
  //   mousedownY.value = event.screenY
  //   if (props.canDanBool == true) return
  //   const that = this
  //   let floatDragWidth = floatDragDom.value.width / 2
  //   let floatDragHeight = floatDragDom.value.height / 2
  //   if (event.preventDefault) {
  //     event.preventDefault()
  //   }
  //   canClick.value = false
  //   floatDragRef.value.style.transition = 'none'
  //   document.onmousemove = function (e) {
  //     var event = e || window.event
  //     left.value = event.clientX - floatDragWidth
  //     top.value = event.clientY - floatDragHeight
  //     if (left.value < 0) left.value = 0
  //     if (top.value < 0) top.value = 0
  //     if (left.value >= clientWidth.value - floatDragWidth * 2) {
  //       left.value = clientWidth.value - floatDragWidth * 2
  //     }
  //     if (top.value >= clientHeight.value - floatDragHeight * 2) {
  //       top.value = clientHeight.value - floatDragHeight * 2
  //     }
  //   }
  // }
  // const mouseUp = (e) => {
  //   const event = e || window.event
  //   // 判断只是单纯的点击，没有拖拽
  //   if (mousedownY.value == event.screenY && mousedownX.value == event.screenX) {
  //     emit('handlepaly', left.value, top.value)
  //   }
  //   document.onmousemove = null
  //   checkDraggablePosition()
  //   floatDragRef.value.style.transition = 'all 0.3s'
  // }
  const toucheStart = () => {
    canClick.value = false
    floatDragRef.value.style.transition = 'none'
  }
  const touchMove = (e) => {
    canClick.value = true
    if (e.targetTouches.length === 1) {
      // 单指拖动
      let touch = event.targetTouches[0]
      left.value = touch.clientX - floatDragDom.value.width / 2
      top.value = touch.clientY - floatDragDom.value.height / 2
    }
  }
  const touchEnd = () => {
    if (!canClick.value) return // 解决点击事件和touch事件冲突的问题
    floatDragRef.value.style.transition = 'all 0.3s'
    checkDraggablePosition()
  }
  /**
   * 判断元素显示位置
   * 在窗口改变和move end时调用
   */
  const checkDraggablePosition = () => {
    // if (this.left + this.floatDragDom.width / 2 >= this.clientWidth / 2) {
    // 判断位置是往左往右滑动
    left.value = clientWidth.value - floatDragDom.value.width
    // } else {
    //    left = 0;
    // }
    if (top.value < 0) {
      // 判断是否超出屏幕上沿
      top.value = 0
    }
    if (top.value + floatDragDom.value.height >= clientHeight.value) {
      // 判断是否超出屏幕下沿
      top.value = clientHeight.value - floatDragDom.value.height
    }
    // this.$emit("tuoDongChange",this.left,this.top);
  }

  onUnmounted(() => {
    window.removeEventListener('scroll', handleScroll)
    window.removeEventListener('resize', handleResize)
  })
</script>
<style>
  /* body { */

  /*  overflow: hidden; */

  /* } */
</style>
<style scoped lang="scss">
  .float-position11 {
    position: absolute;
    top: 70%;
    right: 0;
    z-index: 10003;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.6em;
    height: 3.6em;
    padding: 0.8em;
    overflow: hidden;
    user-select: none;
    background: deepskyblue;
    border-radius: 50%;
    box-shadow: 0 0 10px 2px skyblue;
  }

  .cart {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5em;
    height: 5em;
    border-radius: 50%;
  }

  .header-notice {
    display: inline-block;
    transition: all 0.3s;

    span {
      vertical-align: initial;
    }

    .notice-badge {
      color: inherit;

      .header-notice-icon {
        padding: 4px;
        font-size: 16px;
      }
    }
  }

  .drag-ball .drag-content {
    font-size: 14px;
    color: #fff;
    letter-spacing: 2px;
    overflow-wrap: break-word;
  }
</style>
